<template>
	<view class="container">
		<!--订单列表.开始-->
		<navigator v-for="(item,index) in listData" 
			:key="index" 
			:url="'show?id='+item.id"
			class="order-item">
			<view class="head-box">
				<text class="time">
					<text v-if="item.type===1" class="text">退款</text>
					<text v-else class="text">换货</text>
					<text>{{item.applyTime}}</text>
				</text>
				<text class="state" :class="{red:item.handleStatus===1}">{{orderStateExp(item.handleStatus)}}</text>
				<text v-if="item.status===4" 
					class="btn iconfont icon-delete">
				</text>
			</view>
			<view class="goods-box" 
				v-for="(gItem, gIndex) in item.refundGoods" 
				:key="gIndex">
				<view class="img-box">
					<image mode="widthFix" :src="$api.loadFile(gItem.orderGoods.imgUrl)"></image>
				</view>
				<view class="right">
					<text class="title">{{gItem.orderGoods.goodsTitle}}</text>
					<text class="attr">{{gItem.orderGoods.specText}}  x {{gItem.orderGoods.quantity}}</text>
					<text class="price">{{gItem.orderGoods.realPrice}}</text>
				</view>
			</view>
			<view v-if="item.type===1&&item.handleStatus===3" class="total-box">
				<view class="price-box">
					共计退款
					<text class="price">{{item.refundAmount}}</text>
				</view>
			</view>
			<view v-if="item.handleStatus===1" class="btn-box">
				<button class="btn" @click.stop="linkUrl('show?id='+item.id)">去发货</button>
			</view>
		</navigator>
		<!--底部显示加载效果-->
		<uni-load-more :status="loadingType" @clickLoadMore="loadData('add')"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNo: null, //订单号
				loadingType: "more", //加载状态
				totalCount: 0, //总数量
				totalPages: 0, //总页数
				pageSize: 10, //每页显示条数
				pageIndex: 1, //当前页码
				listData: [], //数据列表
			}
		},
		methods: {
			//初始化数据,带下滑刷新和上滑加载
			async loadData(type='add', loading){
				let _this = this;
				//上滑加载更多
				if(type === 'add'){
					if(_this.loadingType === 'nomore'){
						return;
					}
					_this.loadingType = 'loading';
				}
				//下滑刷新
				else{
					_this.pageIndex=1;
					_this.listData=[];
					_this.loadingType="more";
				}
				
				//加载列表
				let sendUrl = `/account/order/refund?pageSize=${_this.pageSize}&pageIndex=${_this.pageIndex}`;
				if(_this.orderNo){
					sendUrl += `&orderNo=${_this.orderNo}`;
				}
				await _this.$api.request({
					url: sendUrl,
					loading: true
				}).then(res=>{
					let pageInfo = JSON.parse(res.header["x-pagination"]);
					_this.totalCount = pageInfo.totalCount;
					_this.totalPages = pageInfo.totalPages;
					_this.listData = _this.listData.concat(res.data);
					//console.log(res.data)
				}).catch((err)=>{
					_this.loadingType="nomore";
					uni.stopPullDownRefresh();
				});
				
				//判断是否还有下一页
				if(_this.pageIndex >= _this.totalPages){
					_this.loadingType="nomore";
				}else{
					_this.pageIndex++;
					_this.loadingType="more";
				}
				//下滑隐藏动画及上滑事件
				if(type === 'refresh'){
					if(loading == 1){
						uni.hideLoading()
					}else{
						uni.stopPullDownRefresh();
					}
				}
			},
			//处理进度
			orderStateExp(status){
				let stateTip = '处理中';
				if(status===1){
					stateTip = '待买家发货';
				}else if(status===2){
					stateTip = '待商家发货';
				}else if(status===3){
					stateTip = '已完成';
				}else if(status===4){
					stateTip = '已拒绝';
				}
				return stateTip;
			},
			//跳转链接
			linkUrl(url){
				uni.navigateTo({
					url: url
				});
			},
		},
		//页面初始化
		onLoad(options){
			this.orderNo = options.no;
			this.loadData('add');
		},
		//下滑刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//上滑加载更多
		onReachBottom(){
			this.loadData('add');
		}
	}
</script>

<style lang="scss">
	.order-item{
		display: flex;
		flex-direction: column;
		margin: 24rpx 24rpx 0 24rpx;
		border-radius: 20rpx;
		background: #fff;
		.head-box{
			display: flex;
			align-items: center;
			position: relative;
			padding: 0 30rpx;
			height: 80rpx;
			color: #333;
			font-size: 28rpx;
			.time{
				flex: 1;
				.text{
					margin-right: 10rpx;
					color: #ff0000;
				}
			}
			.state{
				color: #999;
				&.red{
					color: #fa436a;
				}
			}
			.btn{
				position: relative;
				padding: 10rpx 0 10rpx 36rpx;
				font-size: 32rpx;
				color: #999;
				&:after{
					content: "";
					width: 0;
					height: 30rpx;
					border-left: 2rpx solid #DCDFE6;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		.goods-box{
			display: flex;
			padding: 20rpx 0 20rpx 30rpx;
			border-top: 2rpx solid #f5f5f5;
			.img-box{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 2rpx;
				width: 136rpx;
				height: 136rpx;
				border-radius: 20rpx;
				background: #f5f5f5;
				image{
					border-radius: 20rpx;
					width: 100%;
				}
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;
				.title{
					font-size: 30rpx;
					color: #333;
					line-height: 1;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.attr{
					color: #999;
					font-size: 26rpx;
					line-height: 1;
					padding: 20rpx 0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.price{
					color: #333;
					font-size:30rpx;
					line-height: 1;
					&:before{
						content: '￥';
						font-size: 24rpx;
					}
				}
				.btn-box{
					display: flex;
					justify-content: flex-end;
					padding-top: 20rpx;
					.btn{
						margin-left: 12rpx;
						padding: 10rpx 30rpx;
						color: #555;
						font-size: 26rpx;
						line-height: 1;
						border: 1px solid #eee;
						border-radius: 100rpx;
					}
				}
			}
		}
		.total-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-bottom: 10rpx;
			.price-box{
				display: flex;
				justify-content: flex-end;
				align-items: baseline;
				padding: 20rpx 30rpx;
				font-size: 26rpx;
				color: #999;
				.num{
					margin: 0 8rpx;
					color: #333;
				}
				.price{
					font-size: 32rpx;
					color: #ff0000;
					&:before{
						content: '￥';
						font-size: 24rpx;
						margin: 0 2rpx 0 8rpx;
					}
				}
			}
		}
		.btn-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			position: relative;
			padding-right: 30rpx;
			border-top: 2rpx solid #f5f5f5;
			.btn{
				width: 160rpx;
				height: 60rpx;
				margin: 0;
				margin-left: 24rpx;
				padding: 0;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				color: #333;
				background: #fff;
				border-radius: 100px;
				&:after{
					border-radius: 120rpx;
				}
				&.red{
					color: #fa436a;
					background: #fff9f9;
					&:after{
						border-color: #f7bcc8;
					}
				}
			}
		}
	}
</style>
